<template>
	<view class="content">
		<view class="input-line">
			<text>真实姓名</text>
			<input type="text" value="" placeholder="请输入真实姓名" />
		</view>
		<view class="input-line">
			<text>身份证号码</text>
			<input type="text" value="" placeholder="请输入身份证号码" />
		</view>
		<view class="up">
			<text>* 上传身份正反面照片</text>
			<text></text>
		</view>
		<view class="up-pic-area">
			<view class="box">
				<view class="addPic">
					+
				</view>
				<view class="">
					上传身份证正面
				</view>
			</view>

			<view class="box">
				<view class="addPic">
					+
				</view>
				<view class="">
					上传身份证正面
				</view>
			</view>

		</view>
		<view class="demo">
			<text>* 实例</text>
			<text></text>
		</view>

		<view class="idCard">
			<image src="../../static/img_default_idcard1.png" mode=""></image>
			<image src="../../static/img_default_idcard2@2x.png" mode=""></image>
		</view>

		<view class="sure-btns">
			确认
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #000000;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;

		.input-line {
			height: 90rpx;
			box-sizing: border-box;
			padding-left: 23rpx;
			padding-right: 23rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 3px solid #272727;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.up {
			height: 90rpx;
			box-sizing: border-box;
			padding-left: 23rpx;
			padding-right: 23rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #DB1414;
		}

		.up-pic-area {
			box-sizing: border-box;
			height: auto;
			padding-left: 50rpx;
			padding-right: 50rpx;
			display: flex;
			justify-content: space-between;

			.box {
				border: 1px dashed gray;
				width: 300rpx;
				height: 200rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #AAAAAA;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.addPic {
					font-size: 88rpx;
				}
			}
		}

		.demo {
			height: 90rpx;
			box-sizing: border-box;
			padding-left: 23rpx;
			padding-right: 23rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #9C9C9C;
		}

		.idCard {
			padding-left: 71rpx;
			padding-right: 71rpx;
			display: flex;
			justify-content: space-between;

			image {
				width: 234rpx;
				height: 159rpx;
				box-sizing: border-box;

			}
		}

		.sure-btns {
			width: 710rpx;
			height: 88rpx;
			background: #DB1414;
			border-radius: 10rpx;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 87rpx;
		}
	}
</style>
